<template>
  <div>
    <h1>{{ msg }}</h1>
    <button @click="run">浪起来</button>
    <button @click="stop">猥琐发育</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "跑马的汉子~~~~~~~~~~你威武雄壮",
      start: "",
      end: "",
      timer: null, // 定时器名字
    };
  },
  methods: {
    run() {
      if (this.timer != null) {
        return;
      }
      this.timer = setInterval(() => {
        this.start = this.msg.substring(0, 1); //截取第一个
        this.end = this.msg.substring(1, this.msg.length); //截取除第一个剩下的
        this.msg = this.end + this.start; // 拼接字符串
      }, 100);
    },
    stop() {
      clearInterval(this.timer); // 停止定时器
      this.timer = null; // 将定时器重新变成null
    },
  },
};
</script>

<style>
</style>